<template>
  <div class="page-container">
    <el-button @click="updateParams">test {{ formParams }}</el-button>
    <BaseForm
      v-model="formParams"
      :config="formConfig"
      :rules="formRules"
      @confirm="onSubmit"
    >
    </BaseForm>
  </div>  
</template>

<script setup>
import BaseForm from '@/components/BaseForm'

const formParams = reactive({
  // test: '123123'
})
const formConfig = ref([
  {
    type: 'input',
    field: 'name',
    label: '输入项',
    // default: 'asdasdasd'
  },
  {
    type: 'select',
    field: 'type',
    label: '普通下拉',
    options: [
      { label: '选项一', value: 0 },
      { label: '选项二', value: 1 },
      { label: '选项三', value: 2 },
    ]
  },
  {
    type: 'datePicker',
    field: 'time',
    label: '日期选择',
  },
  {
    type: 'switch',
    field: 'isSwitch',
    label: '开关',
  },
  {
    type: 'checkbox',
    field: 'checkboxVal',
    label: '多选',
    options: [
      { label: '选项一', value: 0 },
      { label: '选项二', value: 1 },
      { label: '选项三', value: 2 },
    ]
  },
  {
    type: 'radio',
    field: 'radioVal',
    label: '单选',
    options: [
      { label: '选项一', value: 0 },
      { label: '选项二', value: 1 },
      { label: '选项三', value: 2 },
    ]
  },
  {
    type: 'input',
    field: 'textarea',
    label: '输入项',
    props: { type: 'textarea' }
  },
  {
    type: 'upload',
    field: 'imgVal',
    label: '图片',
  },
  {
    type: 'uploadImg',
    field: 'drawImg',
    label: '图片2',
    default: [
      { url: 'https://picsum.photos/200/300' },
      { url: 'https://picsum.photos/200/301' },
      { url: 'https://picsum.photos/200/302' },
    ]
  },
])
const formRules = reactive({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择', trigger: 'change' },
  ]
})
function updateParams () {
  formParams.test = 'a123123'
}
function onSubmit(e) {
  console.log('onSubmit', e)
}
</script>

<style>

</style>